.select-arrow(@color) when (lightness(@color) > 50%) {
    background-image: url('atom://atom-material-ui/assets/svg/arrow-drop-down.svg');
}
.select-arrow(@color) when (lightness(@color) < 50%) {
    background-image: url('atom://atom-material-ui/assets/svg/arrow-drop-down-white.svg');
}
.settings-view, [class*="nuclide"] {
    select.form-control {
        -webkit-appearance: none;
        background-size: 1.5rem;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: right center;
        box-shadow: inset 0 -1px 0 fade(@text-color, 10%);
        padding: 0;
        line-height: 3rem;
        height: 3rem;
        padding: 0;
        color: @text-color;
        border-radius: 0;
        border: none;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        .select-arrow(@app-background-color);

        &:hover {
            .select-arrow(@app-background-color);
            background-color: transparent;
            box-shadow: inset 0 -1px 0 fade(@text-color, 10%);
        }
        &:focus, &:active {
            .select-arrow(@app-background-color);
            background-color: transparent;
            border-color: @base-color;
        }
        option {
            background: @app-background-color;
            color: @text-color;
            border: 1px solid fade(@text-color, 20%);
        }
    }
    .radio, .checkbox {
        padding-left: 3rem;

        .setting-description {
            margin-top: 0.5rem;
        }
    }
    input[type="checkbox"], input[type="radio"] {
        position: relative;
        left: -1rem;
        border: 0.125rem solid @base-color;
        background: none;

        &:checked {
            background: @base-color;

            &::before, &::after {
                border: 0.1rem solid @accent-text-color;
                background-color: @accent-text-color;
                transition: none;
            }
            &::after {
                transform: rotate(-45deg) scale(1) translate(-0.025rem, -0.2rem);
            }
            &::before {
                transform: rotate(225deg) scale(1) translate(0.175rem, -0.025rem);
            }
        }
        &:focus {
            box-shadow: 0 0 1rem fade(@base-color, 30%);
        }
    }
    input[type="color"] {
        width: 3rem;
        height: 3rem;
        position: absolute;
        border: none;
    }
}
